<template>
  <el-menu-item :index="item.path" v-if="!item?.children?.length">
    <div :class="`${item?.meta?.icon} w-20px h-20px`" v-if="item?.meta?.icon"></div>
    <template #title> {{ item?.meta?.title }}</template>
  </el-menu-item>
  <el-sub-menu v-else ref="subMenu" :index="item.path">
    <template #title>
      <div :class="`${item?.meta?.icon} w-20px h-20px`" v-if="item?.meta?.icon"></div>
      <span> {{ item?.meta?.title }}</span>
    </template>

    <sidebar-item
      v-for="child in item.children"
      :key="child.path"
      :is-nest="true"
      :item="child"
      :base-path="child.path"
      class="nest-menu"
    />
  </el-sub-menu>
</template>

<script setup lang="ts">
import type { menuType } from '@/layout/types'
import type { PropType } from 'vue'

defineProps({
  item: {
    type: Object as PropType<menuType>
  },
  isNest: {
    type: Boolean,
    default: false
  },
  basePath: {
    type: String,
    default: ''
  }
})
</script>

<style></style>
